<template>
	<view class="page-user-lottery page-wrap">
		<image src="https://www.moguigame.com/static/rank/bg-rank.png" class="index-top" mode=""></image>
		<view class="page-custom-top-nav">
			<image src="https://www.moguigame.com/static/common/back.png" class="back-img" mode="" @click="toBack"></image>
			<view>新用户有礼</view>
		</view>
		<view class="page-main">
				<!-- <Wheel :mode="2" /> -->
        <almost-lottery
          :prizeList="prizeList"
          :prizeIndex="prizeIndex"
          @reset-index="prizeIndex = -1"
          @draw-before="handleDrawBefore"
          @draw-start="handleDrawStart"
          @draw-end="handleDrawEnd"
          @finish="handleDrawFinish"
          v-if="prizeList.length"
        />
		<!-- 	<view class="lottery-main">
				<image src="https://www.moguigame.com/static/lottery/bg-lottery.png" class="lottery-bg" mode=""></image>
				<image src="https://www.moguigame.com/static/lottery/btn-lottery.png" class="lottery-btn" mode=""></image>
				<view class="lottery-reward-list">
					<view class="lottery-reward-item" v-for="item in 6">奖品</view>
				</view>
			</view> -->
			<view class="lottery-card bg-white">
				<view class="lottery-card-title">活动规则</view>
				<view class="lottery-card-content">极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着，而不是放进冰箱；或者中午的剩菜不加热，晚饭接着吃。对此，武汉市金银潭医院专家提醒，夏季炎热，是消化道传染病的高发季节。食物如果未及时合理储存被细菌、病毒等病原体所污染，容易出现恶心、呕吐、腹痛、腹泻，影响身体健康。</view>
			</view>
			<view class="lottery-card bg-white">
				<view class="lottery-card-title">奖品介绍</view>
				<view class="lottery-card-reward">奖品一</view>
				<view class="lottery-card-content">
					极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着，
				</view>
				<view class="lottery-card-reward">奖品二</view>
				<view class="lottery-card-content">
					极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着，
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Wheel from '../../components/Wheel.vue';
	export default {
		data() {
			return {
				prizeList: [],
        prizeIndex: -1,
        lottery: {}
			};
		},
		components: {
			Wheel
		},
    onLoad() {
      this.getList()
      // this.getLottery()
    },
		methods: {
      handleDrawBefore() {
        console.log('抽奖开始')
      },
      handleDrawStart() {
        console.log('抽奖中')
      },
      handleDrawEnd() {
        console.log('抽奖结束')
      },
      handleDrawFinish() {
        console.log('抽奖完成')
      },
			toBack(){
				uni.navigateBack()
			},
      async getLottery(id) {
        try{
          const {data} = await  this.$Api.getLottery({lottery_active_id: id})
          console.log(data);
          this.lottery = data
          this.prizeList = data?.lottery_awards.map(item => {
            return {
              prizeId: item.id,
              prizeName: item.name,
              prizeStock: item.num,
              prizeWeight: item.weigh,
              prizeImage: item.img
            }
          })
        }catch(e){
          //TODO handle the exception
        }
      },
      async getList(){
        try{
          const {data} =await this.$Api.getLotteryList({})
          console.log(data);
          const id = data.data[0]['id']
          this.getLottery(id)
        }catch(e){
          //TODO handle the exception
        }
      }
		}
	}
</script>

<style lang="scss">
	.page-user-lottery {
		background: #ECEEFF;
		min-height: 100vh;
		// padding-bottom: calc(236rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(236rpx + env(safe-area-inset-bottom));
		.index-top {
			width: 100%;
			height: 860rpx;
			position: absolute;
			top: 0;
		}
		.page-main {
			position: relative;
		}
		.lottery-bg {
			width: 600rpx;
			height: 600rpx;
		}
		.lottery-reward-list {
			position: absolute;
			top:0;
			left:0;
			width: 600rpx;
			height: 600rpx;
			border-radius: 50%;
			overflow: hidden;
			transform: rotate(0deg);
			transition: transform 4s ease-out;
			.lottery-reward-item {
				position: absolute;
				transform-origin: 100% 100%;
				width: 50%;
				height: 50%;
				background-color: red;
				text-align: right;
			}
			.lottery-reward-item:nth-child(1) { transform: rotate(0deg) skewY(-60deg); }
			.lottery-reward-item:nth-child(2) { transform: rotate(60deg) skewY(-60deg); }
			.lottery-reward-item:nth-child(3) { transform: rotate(120deg) skewY(-60deg); }
			.lottery-reward-item:nth-child(4) { transform: rotate(180deg) skewY(-60deg); }
			.lottery-reward-item:nth-child(5) { transform: rotate(240deg) skewY(-60deg); }
			.lottery-reward-item:nth-child(6) { transform: rotate(300deg) skewY(-60deg); }
		}
		.lottery-btn {
			width: 183rpx;
			height: 217rpx;
			position: absolute;
			left: 50%;
			margin-left: -91.5rpx;
			top: 182rpx;
			z-index: 1;
		}
		.lottery-main {
			width: 600rpx;
			height: 600rpx;
			// background: linear-gradient( 147deg, #61BDFF 0%, #8457FF 100%);
			border-radius: 50%;
			margin: 32rpx auto 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		.lottery-card {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 0 auto 32rpx;
			padding: 32rpx;
		}
		.lottery-card-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #7644FF;
		}
		.lottery-card-content {
			margin-top: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}
		.lottery-card-reward {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
			margin-top: 16rpx;
		}
	}
	
</style>
